<script setup>
// 1.reactive：接收对象类型,返回响应对象
// import {reactive} from 'vue'

// const state = reactive({
//     count:100
// })
// const setCount=()=>{
//     state.count++
// }

// 2.ref：接受简单类型或者复杂类型，返回一个响应式对象
// 本质是再原有传入数据的基础上外层包了一个对象，包成了复杂数据类型

// 更见推荐使用ref
import {ref} from 'vue'

const count = ref(0)
console.log(count);
console.log(count.value);

const setCount = () =>{
    count.value++
}


</script>

<template>
    <!-- <div>{{state.count}}</div>
    <button @click="setCount">+1</button> -->
    <div>
        <div>{{count}}</div>
        <button @click="setCount">+1</button>
    </div>
</template>